<script setup lang="ts">
import CustomNavbar from './componets/CustomNavbar.vue';
import XtxSwiper from '@/components/XtxSwiper.vue';
import { getHomeBanner, getCategory, getHot, getguessLike } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import type { BannerItem, CategoryItem, GuessItem, HotItem } from '@/types/home';
import CategoryPanel from './componets/CategoryPanel.vue';
import HotPanel from './componets/HotPanel.vue';
import XtxGuess from '@/components/XtxGuess.vue';
import type { XtxGuessInstance } from '@/types/component';
import Skeletion from '@/pages/index/componets/Skeletion.vue'

let bannerList = ref<BannerItem[]>([]);
let categoryList = ref<CategoryItem[]>([]);
let hotList = ref<HotItem[]>([])
let guessRef = ref<XtxGuessInstance>();
let triggerFlog = ref<boolean>();  //控制刷新动画
let isLoding = ref<boolean>(false);  //控制页面是否刷新完成

const getHomeBannerData = async () => {
  let result = await getHomeBanner();
  bannerList.value = result.result;
}

const getCategoryData = async () => {
  let result = await getCategory()
  categoryList.value = result.result;
}

const getHotData = async () => {
  let result = await getHot()
  hotList.value = result.result;
}

//处理滚动容器 滚动到底部
const onScrolltolower = () => {
  guessRef.value.getguessLikeData();

}
// 处理滚动容器 上划刷新
const onRefresherrefresh = async () => {

  triggerFlog.value = true;
  guessRef.value.resetGuessLikeData(); //重置数据
  await Promise.all([getHomeBannerData(), getCategoryData(), getHotData(),])
  triggerFlog.value = false;
}

onLoad(async () => {
  await Promise.all([getHomeBannerData(), getCategoryData(), getHotData(),])
  isLoding.value = true;
})


</script>

<template>
  <CustomNavbar />
  <scroll-view scroll-y class="scroll-view" :refresher-enabled=true :refresher-triggered="triggerFlog"
    @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
    <Skeletion v-if="!isLoding" />
    <template v-if="isLoding">
      <XtxSwiper :bannerList="bannerList" />
      <CategoryPanel :categoryList="categoryList" />
      <HotPanel :hotList="hotList" />
      <XtxGuess ref="guessRef" />
    </template>

  </scroll-view>
</template>

<style lang="scss">
//
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f7f7f7;
}

.scroll-view {
  flex: 1;
}
</style>
